﻿@import "../theme";

.widget-box {
    background-color: lighten(@content-background-color, 3%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.33);
    border: @content-border;
    margin-bottom: 15px;
}

.widget-header {
    border-bottom: @content-border;
    height: 2.5em;

    .widget-header-icon {
        border-right: @content-border;
        padding: 0.85em;
        height: 100%;
        float: left;
    }

    h5 {
        font-weight: bold;
        padding: 0.75em;
        font-size: 1em;
        height: 100%;
        float: left;
        margin: 0;
    }

    .widget-header-buttons {
        height: 100%;
        float: right;

        .btn {
            border-left: @content-border;
            border-top-style: none;
            color: @content-color;
            font-size: 0.85em;
            border-radius: 0;
            padding: 0.8em;
            min-width: 3em;
            display: block;
            height: 100%;
            float: left;

            &:hover {
                background: linear-gradient(@active-from-color, @active-to-color);
                color: @active-color;
            }

            > i + .text {
                padding-left: 5px;
            }
        }
    }
}

.widget-content {
    overflow-x: auto;
    width: 100%;

    .form-group {
        border-bottom: @form-group-border-bottom;
        border-top: @form-group-border-top;
        padding: 10px;
        margin: 0;
        zoom: 1;

        &:before,
        &:after {
            display: table;
            content: " ";
        }

        &:after {
            clear: both;
        }

        &:last-child {
            border-bottom: 0;
        }

        textarea,
        .input-group {
            max-width: 100%;
            width: 100%;
        }
    }

    .control-label {
        text-align: left;
    }

    .form-actions {
        text-align: center;
    }
}

@media (max-width: 767px) {
    .widget-header .widget-header-buttons {
        .btn > i {
            padding: 0;
        }

        .text {
            display: none;
        }
    }
}

@media (min-width: 992px) {
    .widget-content {
        .control-label {
            text-align: right;
        }

        .control-validation {
            text-align: center;
        }
    }
}

@media (min-width: 1200px) {
    .widget-content {
        .control-validation {
            text-align: left;
        }

        .form-actions {
            text-align: right;
        }
    }
}
